<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 2px 2px 5px black;
            width: 80%;
            margin: 20px auto;
        }

        .brand {
            margin-bottom: 15px;
        }

        .info {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <script>
        let obj = {
            goods: '小米',
            name: '小米10 青春版',
            num: 100012816024,
            weight: '0.55kg',
            address: '中国大陆'
        }
        obj.name = '小米10 PLUS'
        obj.color = '粉色'
        document.write(`<div class="box1">
        <div class="brand">
            <p>品牌：${obj.goods}</p >
        </div>
        <div class="info">
            <p>商品名称：${obj.name}</p>
            <p>商品编号：${obj.num}</p>
            <p>商品毛重：${obj.weight}</p>
            <p>商品产地：${obj.address}</p>
            <p>颜色:${obj.color}</p>
        </div>
    </div>`)
    </script>
</body>

</html>